<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>学生信息管理</title> 
    </head>
    <body>
        <h1>学生信息管理</h1>
        <table id="tid" width="500" border="1">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>班级</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1001</td>
                    <td>张三</td>
                    <td>男</td>
                    <td>20</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>1002</td>
                    <td>李四</td>
                    <td>女</td>
                    <td>21</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>1003</td>
                    <td>王五</td>
                    <td>男</td>
                    <td>22</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>1004</td>
                    <td>赵六</td>
                    <td>女</td>
                    <td>20</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr> -->
            </tbody>
        </table>

        <br/><br/><br/>
        <h2>添加学生信息</h2>
        <form action="#" name="myform">
            <!-- 学号：<input type="text" name="sno"/><br/><br/> -->
            姓名：<input type="text" name="name"/><br/><br/>
            性别：<input type="radio" name="sex" checked value="1"/>男
                  <input type="radio" name="sex" value="0"/>女 <br/><br/>
            年龄：<input type="text" name="age"/><br/><br/>
            班级：<input type="text" name="classid"/><br/><br/>
            <input type="submit" value="添加"/>
        </form>

        <script>
           // 通过表单填写，点击添加按钮后，实现将表单中的数据添加到上面表格中。

           // Ajax加载学员信息，并输出到页面中
           function showData(){
               // 调用自定义的Ajax函数，发送get请求获取所有学生信息并在回调函数中处理
               myAjax("GET", "/api/stu", "", function(data){
                    // 判断是否失败？
                    if(data.code !== 200){
                        alert("Ajax请求失败！原因："+data.message);
                        return;
                    }
                    // 获取表格的tbody节点
                    const tbody = document.querySelector("#tid tbody");
                    tbody.innerHTML = "";
                    // 遍历数据并创建tr节点，然后添加到tbody中
                    data.data.forEach((stu,index) => {
                        let tr = document.createElement("tr");
                        tr.innerHTML = `<td>${index+1}</td>
                                        <td>${stu.name}</td>
                                        <td>${stu.sex==1? "男" : "女"}</td>
                                        <td>${stu.age}</td>
                                        <td>${stu.classid}</td>
                                        <td><a href="javascript:;" onclick="doDel('${stu._id}',this)">删除</a></td>`;
                        tbody.append(tr);
                    });
               }); 
           }
           showData();

           // 执行学生信息删除操作
           function doDel(id, ob){
               // console.log(id,ob);
               // 判断并发送Ajax执行删除
               if(confirm("确定要是删除吗？")){
                    // 调用自定义函数，发送 Ajax请求，执行数据删除
                    myAjax("GET", "/api/stu/del", "id="+id, function(data){
                        // 判断是否成功？若成功则执行当前行节点删除
                        if(data.code == 200){
                            // 删除超链接对应tr行节点
                            ob.parentElement.parentElement.remove();
                        }
                    });
               }
           }

           // 学生信息添加操作
           // 获取form表单并绑定表单提交事件
           const form = document.querySelector("form");
           form.onsubmit = function(){
                // 获取表单项内容，并拼接后添加到data数组中
                const data = [];
                //data.push("sno="+form.sno.value);
                data.push("name="+form.name.value);
                data.push("sex="+form.sex.value);
                data.push("age="+form.age.value);
                data.push("classid="+form.classid.value);
                //console.log(data.join("&"));

                // 调用Ajax函数，执行添加请求提交
                myAjax("POST", "/api/stu/add", data.join("&"), function(data){
                    //console.log(data);
                    // 判断是否失败？
                    if(data.code !== 200){
                        alert("数据添加失败！原因"+ data.message);
                        return;
                    }
                    // 执行一下加载学员信息
                    showData();
                    // 添加成功的处理
                    // 获取要求添加的tbody节点
                    // const tbody = document.querySelector("#tid tbody");
                    // // 创建tr元素节点
                    // const tr = document.createElement("tr");
                    // // 在tr中创建并添加td元素节点和内容信息
                    // tr.innerHTML =  `<td>${data.data.sno}</td>
                    //                 <td>${data.data.name}</td>
                    //                 <td>${data.data.sex==1? "男" : "女"}</td>
                    //                 <td>${data.data.age}</td>
                    //                 <td>${data.data.classid}</td>
                    //                 <td><a href="javascript:;" onclick="doDel('${data.data._id}',this)">删除</a></td>`;
                    // tbody.append(tr); // 将tr节点添加的tbody中
                    form.reset(); // 重置form表单
                });

                return false; // 阻止表单提交
           }

           /**
            * 将原生的Ajax操作封装成一个函数 
            * @param {String} method Ajax的请求方式，GET或POST
            * @param {String} url 请求地址
            * @param {String} data 请求的参数信息 若没有空字串"" 
            * @callback {Function} callback Ajax的回调函数
            */
           function myAjax(method, url, data, callback){
                // 创建请求对象
                const xhr = new XMLHttpRequest();
                xhr.responseType = "json";
                if(method == "GET"){
                    // 初始化请求
                    xhr.open(method,url+"?"+data + "&time="+Date.now());
                    // 发送
                    xhr.send();
                } else {
                    // 初始化请求
                    xhr.open(method,url);
                    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    // 发送
                    xhr.send(data);
                }
                // 绑定请求状态改变事件，处理Ajax响应
                xhr.onreadystatechange = function(){
                    // 当前请求状态码为4时,表示响应结束
                    if (xhr.readyState == 4){
                        // 判断响应状态为200
                        if (xhr.status == 200){
                            callback(xhr.response);
                        }
                    }
                };
           }
        </script>
    </body>
</html>